<template>
  <div :id="tuXingID" :style="{ height: contentHeigth, width: contentWidth }"></div>
</template>

<script setup>
  import * as echarts from 'echarts'
  import { getGongXuTuBiaoList } from '@/api/shengChanJianShi'
  import { defineProps, nextTick, onMounted, onUnmounted } from 'vue'

  const props = defineProps({
    tuXingID: String,
    contentHeigth: String,
    contentWidth: String
  })
  const myChart = ref(null)
  // const valueList = ref([])
  const nameList = ref([])
  // const pieData = ref([])
  const colors = ref(['#1cd389', '#668eff', '#ffc751', '#ff6e73', '#8683e6', '#9692ff', '#ffc751'])
  const lineargroup = ref([])

  const init = () => {
    nextTick(() => {
      handleSetVisitChart()
    })
  }

  const handleSetVisitChart = () => {
    myChart.value = echarts.init(document.getElementById(this.tuXingID))
    let option = {
      color: colors.value,
      title: [
        {
          text: '各工序当月产量',
          left: 0,
          top: 10
        },
        {
          subtext: '单位：Kg',
          right: 10,
          top: 10,
          subtextStyle: {
            color: '#282727',
            fontSize: 14,
            fontWeight: 'bold'
          }
        }
      ],
      legend: {
        data: nameList.value,
        orient: 'vertical',
        // bottom:0,
        right: 10,
        top: 'middle',
        bottom: 10,
        icon: 'rect',
        textStyle: {
          color: '#343232',
          fontSize: 16
        }
      },
      series: [
        {
          top: '15%',
          type: 'funnel',
          height: '90%',
          gap: 0,
          left: '2%',
          width: '60%',
          sort: 'none',
          label: {
            show: true,
            position: 'inside',
            fontSize: '14',
            formatter: function (params) {
              return params.value + 'kg'
            },
            rich: {
              aa: {
                padding: [8, 0, 6, 0]
              }
            }
          },
          data: lineargroup.value
        }
      ]
    }

    myChart.value.setOption(option, true)
    window.addEventListener('resize', function () {
      myChart.value.resize()
    })
  }
  onMounted(() => {
    getGongXuTuBiaoList().then((res) => {
      nameList.value = res.map((val) => {
        return val.craftNodeName
      })
      lineargroup.value = res.map((val) => {
        return {
          value: val.yarnWeight,
          name: val.craftNodeName,
          craftNodeOrder: val.craftNodeOrder,
          number: val.yarnWeight
        }
      })
    })
  })

  onUnmounted(() => {
    myChart.value?.dispose()
  })
</script>

<style scoped></style>
